<template>
<div id="groupChat">

    <div id="window" class="container">
        <div class="row title">
            {{group.name}}
        </div>

        <div class="row chat">
            <div class="col-12" id="chatBox">

                <b-modal size="xl" centered ref="my-modal" hide-footer title="查看图片">
                    <div id="pic-modal">
                        <img :src="modalPic" alt="" class="img-fluid">
                    </div>
                </b-modal>

                <div v-for="message in messages" :key="message._id" :class="getClassName(message)" class="message">
                    <div class="userAvatar">

                        <img v-if="!!message.from.avatar" :src="message.from.avatar" alt="">
                        <img v-else src="../assets/avatar.jpg" alt="">

                    </div>
                    <div>
                        <div class="username">
                            {{message.from.username}}
                        </div>
                        <div class="content">
                            <div class="text" v-if="message.msgType===1">{{message.content}}</div>
                            <img v-if="message.msgType==2" :src="message.content" alt="" @click="showPic(message)">
                            <audio v-if="message.msgType==3" :src="message.content" controls></audio>
                            <video v-if="message.msgType==4" :src="message.content" controls></video>
                            <a v-if="message.msgType==5" download :href="message.content">{{message.fileName}}</a>
                        </div>
                    </div>

                </div>

            </div>

        </div>

        <div class="input-form row">
            <div class="chat-form">
                <textarea class="text-input" v-model="msg" > </textarea>
                <input type="file" id="uploadFile" @change="sendFile">
                <label for="uploadFile" id="uploadBtn">Upload</label>
                <button class="btn btn-primary " id="send" @click="sendMsg" :disabled="isEmpty">Send</button>
            </div>
        </div>

    </div>

</div>
</template>

<script>
import io from 'socket.io-client'

import gropuApi from '../api/group'
export default {
    name: 'GroupChat',
    props: {

    },
    data() {
        return {

            users: [],
            group_id: '',
            messages: [],
            title: '',
            modalPic: '',
            online: false,
            msg: '',
            socket: io(`${this.config.SERVER}/group`),

        }
    },

    methods: {

        hideModal() {
            this.$refs['my-modal'].hide()
        },
        showPic(msg) {

            this.modalPic = msg.content;
            this.$refs['my-modal'].show();
        },
        sendMsg() {

            if (this.isEmpty) {
                alert('发送信息不能为空！');
                return;
            }
            let msgtype = 1;
            if (this.msg.indexOf('data:image/') != -1 && this.msg.indexOf('base64') != -1)
                msgtype = 2;

            const msg = {
                msgType: msgtype,
                from: this.current_user,
                to: this.group_id,
                content: this.msg
            }
            this.messages.push(msg);
            this.socket.emit('groupMsg', msg);
            this.msg = '';

        },
        sendFile(e) {
            let file = e.target.files[0];
            window.console.log(file);
            if (!file)
                return;
            let fileType = 0;
            window.console.log(file.type);

            let fileName = file.name;

            if (file.type.indexOf('image') != -1)
                fileType = 2;
            else if (file.type.indexOf('audio') != -1)
                fileType = 3;
            else if (file.type.indexOf('video') != -1)
                fileType = 4
            else
                fileType = 5;

            const msg = {
                msgType: fileType,
                from: this.current_user.id,
                to: this.group_id,
                content: file,
                fileName: fileName,
            }

            this.socket.emit('groupMsg', msg);

        },
        getClassName(msg) {
            if (msg.from.id == this.current_user.id)
                return 'self';
            else
                return '';
        }
    },

    computed: {
        group() {
            return this.$store.state.group;
        },
        current_user() {
            return this.$store.state.user;
        },
        isEmpty() {
            return /^[\s]+$/.test(this.msg) || this.msg.length == 0;
        }
    },

    created() {

        this.group_id = this.$route.params.id;
        gropuApi.getGroupById(this.group_id).then(res => {
            window.console.log(res);
            if(!res.data){
                alert('该群组不存在！');
                this.$router.go(-1);
            }
            this.$store.commit('SET_GROUP', res.data);
        }).catch(err => {
            window.console.log(err.response)
        })

        this.socket.emit('joinRoom', this.group_id);

    },

    mounted() {

        document.title = `正在聊天`;

        this.socket.on('msgFromGroup', msg => {
            if (msg.from.id != this.current_user.id || msg.msgType != 1) {
                window.console.log('exected!')
                this.messages.push(msg);
            }

        });

        

    },
    updated() {
        let chatBox = document.getElementById('chatBox');
        chatBox.scrollTop = chatBox.scrollHeight;
    },

}
</script>

<style lang="scss" scoped>
$font-family-sans-serif: // Safari for macOS and iOS (San Francisco)
-apple-system,
// Chrome < 56 for macOS (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Basic web fallback
"Helvetica Neue",
Arial,
sans-serif,
// Emoji fonts
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol" !default;

#groupChat {
    // font-family: Helvetica, Tahoma, Arial,"Hiragino Sans GB","STXihei","华文细黑", "Microsoft YaHei",  "微软雅黑",
    // "SimSun","宋体","Heiti","黑体", sans-serif;
    font-family: "Segoe UI Emoji";
}

#window {

    background: #F8F8FF;
    /* height: 98vh; */
    border-radius: 2px;
    /* padding: 1em; */
}

.title {
    background: #404040;
    font-size: 1.2rem;
    height: 4vh;
    min-height: 2rem;
    padding: 5px 10px;

    color: white;
    justify-content: center;
    position: sticky;
}

/* .chat {
    height: 86vh;
} */

#chatBox {
    height: 80vh;
    margin: 2px auto;
    overflow-y: scroll;
    padding: 0 0.8vw;

}

#chatBox::-webkit-scrollbar {
    width: 1vw;
}

#chatBox::-webkit-scrollbar-thumb {
    border-radius: 0.4vw;
    background: rgba(0, 0, 0, .1);
}

.message {
    margin-top: 2vh;
    display: flex;

}

// .userAvatar{
//     display: flex;
// }

.userAvatar img {

    width: 6vh;
    border-radius: 50%;
}

.username{
    font-weight: 600;;
    margin-left:1vw;
    font-size: 0.8rem;
    
}

.self .username{
    margin-right: 0.4rem;
    text-align: right;
}

.content {
    word-break: break-word;
    max-width: 90vw;
    margin-left: 1vw;
    display: flex;
    align-items: center;
}

.content a {
    padding: 1vh 1vw;
    font-size: 2.5vh;

}

@media (max-width: 768px) {
    .content video {
        max-width: 80vw;
    }
}

@media (max-width: 1921px) {
    .content video {
        max-height: 70vh;
        max-width: 50vw;
    }
}

.content img {
    border-radius: 0.2rem;
    max-width: 52vw;
}

#pic-modal {
    text-align: center;
}

@media (min-width: 1921px) {
    .content img {
        border-radius: 0.2rem;
        max-width: 35vw;
    }
}

.self {

    flex-direction: row-reverse;

}

.self .content .text {
    background: #ffaaaa;
    margin-left: 0;
    margin-right: 0.4rem;
}

.text {
    white-space: pre-wrap;
    font-size: 1rem;
    background: #409EFF;
    border-radius: 0.2rem;
    color: white;
    margin-bottom: 1vh;
    padding: 0.5em;
    min-height: 4vh;

}

.input-form {
    height: 8vh;
    min-height: 2.5rem;
}

.chat-form {
    border-top: #eee 0.2rem solid;
    background: white;
    width: 100%;
    display: flex;

    padding: 1vh;

}

.text-input {
    background: #fbfbfb;
    width: 90%;
    height: 100%;
    border: 2px solid #eee;
    border-radius: 0.2rem;
    resize: none;
    padding-left: 0.2rem;
    font-size: 1rem;
    color: #333;
    display: flex;

}

.text-input:focus {
    background: #fff;
}

.text-input::-webkit-scrollbar {
    width: 0.5rem;

}

.text-input::-webkit-scrollbar-thumb {
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, .1);

}

#uploadFile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

#uploadBtn {
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    text-align: center;
    height: 100%;
    margin-left: 0.5rem;
    background: #ff9969;
    border-radius: .25rem;
    color: #fff;
    font-size: 1rem;

}

#uploadBtn:hover {
    cursor: pointer;
}

.chat-form button {
    height: 100%;
    margin-left: 0.5rem;
    padding: 0 0.5rem;

}
</style>
